<template>
  <div class="fanan_footer">
    <el-pagination
      class="pagination"
      @size-change="store.handleSizeChange"
      @current-change="store.handleSizeChange"
      v-model:current-page="state.page.page"
      v-model:page-size="state.page.page_size"
      layout=" total, prev, pager, next,sizes "
      :total="state.page.total"
    />
  </div>
</template>

<script setup>
const { store, state } = inject('Fanan')
</script>

<style lang="scss" scoped>
.fanan_footer {
  width: 100%;
  height: 56px;
  box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.07);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 16px;
}
</style>

<style>
.fanan_footer .btn-prev,
.fanan_footer .btn-next,
.fanan_footer .el-pager li {
  border: solid 1px #ebebeb;
  margin: 0 4px;
}
.fanan_footer .el-pager li.is-active{
    border-color: var(--pcmain-color);
    color: var(--pcmain-color);
}
</style>